<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form-item label="年度" prop="year">
            <el-select v-model="pram.year" placeholder="年度" clearable style="width: 100%">
              <el-option
                v-for="(item) in yearList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="pram.name" maxlength="150" placeholder="项目名称" />
          </el-form-item>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="类别" prop="type">
                <el-select v-model="pram.type" placeholder="类型" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in typeList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目类型" prop="classId">
                <el-select v-model="pram.classId" placeholder="类型" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in categoryList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="责任单位" prop="departmentId">
                <el-select v-model="pram.departmentId" placeholder="责任单位" clearable style="width: 100%">
                  <el-option
                    v-for="(item,index) in departmentList"
                    :key="index"
                    :label="item.unitName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="包抓领导" prop="leader">
                <el-input v-model="pram.leader" placeholder="包抓领导" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="主要建设规模" prop="scale">
            <el-input v-model="pram.scale" type="textarea" :rows="5" placeholder="主要建设规模" />
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="pram.sort" :min="0"/>
          </el-form-item>
<!--        </el-form>-->
      </el-tab-pane>
        <el-tab-pane label="状态及进展情况" name="second">
          <el-form-item label="状态" prop="status">
            <el-select v-model="pram.status" placeholder="状态" clearable style="width: 100%">
              <el-option
                v-for="(item,index) in statusList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="进展情况" prop="remarks">
            <el-input v-model="pram.remarks" type="textarea" :rows="7" placeholder="进展情况" />
          </el-form-item>

        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div class="btn-box">
      <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:project:save','admin:project:info']">{{ isCreate===0?'确定':'更新' }}</el-button>
      <el-button @click="close">取消</el-button>
    </div>

  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce/index'
import  * as projectApi from '@/api/projectApi.js'
import * as roleApi from '@/api/role.js'
import {Debounce} from '@/utils/validate'
import {proAdd} from "@/api/projectApi.js";
export default {
  // name: "edit"
  components: { Tinymce },
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    allStatusList:{
      type:Array
    },
    allYearList:{
      type:Array
    },
    allTypeList:{
      type:Array
    },
    allCategoryList:{
      type:Array
    },
    allDepartmentList:{
      type:Array
    },
  },
  data() {
    const validateAmount = (rule, value, callback) => {
      let match = /(^[1-9]\d{0,5}$)|(^[1-9]\d{0,5}(\.\d{1,2}?)$)/
      if (!value) {
        return callback(new Error('请填写金额'));
      } else if (!match.test(value)) {
        ///^[1-0]\d{0,3}(\.\d{1,2}?)$/.test(str)||
        callback(new Error('金额最多不超过100亿，小数点后面最多两位!'));
      } else {
        callback();
      }
    };
    return {
      constants:this.$constants,
      activeName:"first",
      otherInfoVisible: false,
      pram: {
        name: null,
        year: null,
        departmentId:null,
        leader: null,
        type:null,
        classId:null,
        scale:null,
        remarks:null,
        status:null,
        sort:0,
        id: 0,
      },
      rules: {
        name: [{ required: true, message: '请填项目名称', trigger: ['blur', 'change'] }],
        year: [{ required: true, message: '请选择年度', trigger: ['blur', 'change'] }],
        departmentId: [{ required: true, message: '请选择责任单位', trigger: ['blur', 'change'] }],
        //constructUnit: [{ required: true, message: '请填建设单位名称', trigger: ['blur', 'change'] }],
        //constructName: [{ required: true, message: '请填建设单位负责人', trigger: ['blur', 'change'] }],
        leader: [{ required: true, message: '请填包抓领导', trigger: ['blur', 'change'] }],
        type: [{ required: true, message: '请选择类型', trigger: ['blur', 'change'] }],
        classId: [{ required: true, message: '请选择类别', trigger: ['blur', 'change'] }],
        status: [{ required: true, message: '请选择状态', trigger: ['blur', 'change'] }],
        // scale: [{ required: true, message: '请填主要建设规模', trigger: ['blur'] }],
        remarks: [{ required: true, message: '请填进展情况', trigger: ['blur'] }],
      },
      typeList:[],
      categoryList:[],
      yearList:[],
      departmentList:[],
      statusList:[],
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },

    handleClick(tab) {
      if (tab.name === 'second') {
        this.otherInfoVisible = true;
      }else{
        this.otherInfoVisible = false;
      }
    },

    initEditData() {
      this.typeList = this.allTypeList
      this.categoryList = this.allCategoryList
      this.yearList = this.allYearList
      this.departmentList = this.allDepartmentList
      this.statusList = this.allStatusList

      if (this.isCreate !== 1) return //编辑
      const { name, year, departmentId, id, type, classId, scale, remarks, leader, status, sort } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram.name = name
      this.pram.year = year
      this.pram.departmentId = departmentId
      this.pram.type = type
      this.pram.classId = classId
      this.pram.leader = leader
      this.pram.remarks = remarks
      this.pram.status = status
      this.pram.scale = scale
      this.pram.sort = sort
      this.pram.id = id
    },

    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) {
          setTimeout(() => {
            //使用定时器，防止出发此处判断__error时验证器的__error的class还未添加
            //console.log(document.getElementsByClassName('el-form-item__error').length)
            if (document.getElementsByClassName('el-form-item__error').length > 0) {
              let errorNode = document.getElementsByClassName('is-error')[0];//$('.is-error')
              //console.log(errorNode.parentNode.id)
              //如果html结构变了此处需要检查是否多级parentNode
              if (errorNode.parentNode.id === "pane-second") {
                this.activeName = "second"
                this.otherInfoVisible = true
              } else if (errorNode.parentNode.id === "pane-first") {
                this.activeName = "first"
                this.otherInfoVisible = false
              }
            }
          }, 200);
          return
        }
        if (this.isCreate === 0) {
          this.handlerSave()
        } else {
          this.handlerEdit()
        }
      })
    }),
    handlerSave() {
      projectApi.proAdd(this.pram).then(data => {
        this.$message.success('创建重点投资项目成功')
        this.$emit('hideEditDialog')
      })
    },
    handlerEdit() {
      projectApi.proAdd(this.pram).then(data => {
        this.$message.success('更新重点投资项目成功')
        this.$emit('hideEditDialog')
      })
    },
  }
}
</script>

<style scoped>
.tips{
  color:#999;
}
.btn-box{
  margin-top:20px;
}
</style>
